<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
      
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderId" label="订单号">
          <a-input disabled placeholder="订单号" v-model="model.orderId" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluate" label="评价">
          <a-input placeholder="请输入评价" v-model="model.evaluate" />
        </a-form-model-item>
        <!-- <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nannyId" label="月嫂id">
          <a-input placeholder="请输入月嫂id" v-model="model.nannyId" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="motherId" label="宝妈id">
          <a-input placeholder="请输入宝妈id" v-model="model.motherId" />
        </a-form-model-item> -->
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="score" label="得分">
          <a-input-number placeholder="得分" v-model="model.score" :min="0" :max="5"/>
        </a-form-model-item>
		<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分享你的服务体验">
		  <imageUpload :fileList="model.picsList" :uploadId="6" :number="number" @change="changeUpload"
		  	:text="'分享你的服务体验'" />
		</a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
  import { httpAction,getAction } from '@/api/manage'
  import moment from "moment"
  import imageUpload from './baseInfoImageUpload'
  export default {
    name: "WechatEvaluateModal",
	components: {
		imageUpload
	},
    data () {
      return {
		number: 50,
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules:{
        },
        url: {
          add: "/wechat/wechatEvaluate/add",
          edit: "/wechat/wechatEvaluate/edit",
		  detail:'/wechat/wechatEvaluate/queryByOrderId'
        },
      }
    },
    created () {
    },
    methods: {
      edit (record) {
		getAction(this.url.detail,{orderId:record.id},'get').then((res)=>{
		  if(res.success){
		     const result = res.result
			 if(result) {
				 const pics = result && result.pics ? result.pics
				 	.split(',') : []
				 result.picsList = pics.map((item, index) => {
				 	return {
				 		uid: index,
				 		name: 'image.png',
				 		status: 'done',
				 		url: item
				 	}
				 })
				 result.picsList = result.picsList || []
				 this.model = result
				 this.visible = true;
			 }else {
				 this.model = {
					 orderId: record.id,
					 picsList: [],
					 pics: '',
					 score: 5,
					 evaluate: ''
				 }
				 console.log(this.model)
				 this.visible = true;
			 }
			 
		  }else{
		    this.$message.warning(res.message);
			this.visible = true;
		  }
		})
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.$refs.form.clearValidate();
      },
	  changeUpload(data) {
		this.model.picsList = data
		let arr = []
		data.forEach(item => {
			arr.push(item.url)
		})
		this.model.pics = arr.join(',')
	 },
      handleOk () {
        const that = this;
        // 触发表单验证
         this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
			let httpurl = '';
			let method = '';
			if(!this.model.id){
			  httpurl+=this.url.add;
			  method = 'post';
			}else{
			  httpurl+=this.url.edit;
			   method = 'put';
			}
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
             return false;
          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>